<template>
    <draggable v-bind="dragOptions" class="draggable" :list="list" :item-key="key => key" @add="onAdd">
        <template #item="{ element, index }">
            <div class="control-item">
                <div class="item" :class="{ action: element.action }, [element.type]"
                    @click.stop="selectItem(element, $event, index, list)">
                    <div class="handle-content" v-if="true">
                        <div class="fns">
                            <div class="left">
                                <div class="item fn move handle">
                                    <i class="icon fn fa-duotone fa-up-down-left-right"></i>
                                </div>
                            </div>
                            <div class="right">
                                <div class="item fn copy">
                                    <i class="icon fn fa-duotone fa-copy"></i>
                                </div>

                                <div class="item fn remove">
                                    <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="取消"
                                        icon-color="#626AEF" title="您确定要移除?"
                                        @confirm="removeItem(index, $event, element, list)">
                                        <template #reference>
                                            <i class="icon fn fa-duotone fa-trash-can" />
                                        </template>
                                    </el-popconfirm>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-item">
                        <el-form-item v-bind="element.form">
                            <component :is="element.template()" v-model="list[index]" />
                        </el-form-item>
                    </div>
                </div>
            </div>
        </template>
    </draggable>
</template>
<script setup>
import inevent from '../../utils/event';
import { dragOptions } from '../../configure';
let list = defineModel();
const selectItem = (element, event, index, list) => {
    let isContains = false;
    const excludes = ["fn", "ep-tabs__item"];
    excludes.forEach((value, index) => {
        isContains = !isContains ? event.srcElement.classList.contains(value) : isContains;
    });
    if (!isContains) {
        inevent.execute("controls-attributes-event", { element, event, index, list });
    }
};
const removeItem = (index) => {
    list.value.splice(index, 1);
};
const onAdd = (e) => {
    let obj = e.item._underlying_vm_;
    obj.form.name = obj.name + "_" + Math.floor(Date.now() / 1000);
};
</script>
<style scoped></style>